<template>
  <div class="buttonAddWrap">
    <el-button type="primary"  size="small"  @click="dialogFormVisibleAdd = true" >添加角色</el-button>
    <el-dialog @opened="$store.commit('dialogTop')" title="添加角色" :visible.sync="dialogFormVisibleAdd" @close="addDialogClose('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName" :rules="[{ 'required':true, 'message': '请输入角色名称', }]">
          <el-input size='mini'  v-model="ruleFormAdd.roleName" auto-complete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色类型" prop="roleType" :rules="[{ 'required':true, 'message': '请选择角色类型', }]">
          <el-select  style="width: 100%;" v-model="ruleFormAdd.roleType" size="mini"  placeholder="角色类型">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="角色级别" prop="roleLevel" :rules="[{ 'required':true, 'message': '请选择角色级别','trigger': 'blur' }]">
          <el-radio-group v-model="ruleFormAdd.roleLevel" >
            <el-radio :label="1">管理员</el-radio>
            <el-radio  :label="2">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="所属单位" prop="agencyId" :rules="[{ 'required':true, 'message': '请选择单位', }]">
          <el-select :disabled="$store.state.agencyId" style="width: 100%;" v-model="ruleFormAdd.agencyId" size="mini"  placeholder="所属单位">
            <el-option
              v-for="item in $store.state.govAgencyList"
              :key="item.agencyId"
              :label="item.agencyName"
              :value="item.agencyId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="角色状态" prop="roleStatus" :rules="[{ 'required':true, 'message': '请选择角色状态', 'trigger': 'blur'}]">
          <el-radio v-model="ruleFormAdd.roleStatus" :label="1">启用</el-radio>
          <el-radio v-model="ruleFormAdd.roleStatus" :label="2">停用</el-radio>
        </el-form-item>
        <!-- 地图 -->
        <mapMarker ref="mapMarker" :lat="ruleFormAdd.lat" :lng="ruleFormAdd.lng" @move="moveEvent"></mapMarker>
        <el-form-item> </el-form-item>
        <div style="text-align: center;margin-bottom: 3px;">
          <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import mapMarker from "./mapMarker.vue"
  export default {
    props:[],
    components: {
      mapMarker
    },
    data () {
      return {
        options1: [{
          value: '1',
          label: '市交通局'
        }, {
          value: '2',
          label: '市交警局'
        }, {
          value: '3',
          label: '市城管局'
        }, {
          value: '4',
          label: '区政府'
        }],
        ruleFormAdd: {
          roleName:"",
          roleLevel: 1,
          roleType: '1',
          roleStatus: 1,
          agencyId: 1,
          lat: parseFloat(this.$store.state.userInfo.lat),
          lng: parseFloat(this.$store.state.userInfo.lng),
        },
        dialogFormVisibleAdd: false,
        rulesAdd: {

        }
      }
    },
    methods: {
      // 更换点位
      moveEvent(point){
        this.ruleFormAdd.lat=point.lat
        this.ruleFormAdd.lng=point.lng
      },
      //关闭回调
      addDialogClose(formName){
        this.$refs[formName].resetFields();
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + `/system/insertRole`, this.ruleFormAdd)
          .then(response=>{
            if(response.data.code==200){
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.$emit('searchRowsInfo')
              this.dialogFormVisibleAdd = false
              this.$refs.mapMarker.reset(this.$store.state.userInfo.lng, this.$store.state.userInfo.lat)
            }

          })
          .catch(error=>{
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .buttonAddWrap
    display inline-block
    margin-left 10px

</style>
